<template>
  <div class="home">
    <div class="home-container">
      <header class="header">
        <Header />
      </header>
    </div>
    <div class="w-[80%] flex justify-start items-center m-auto">
      <el-breadcrumb :separator-icon="ArrowRight" class="pt-6 pb-6">
        <el-breadcrumb-item :to="{ path: '/' }" class="cursor-pointer">
          <img
            src="@/assets/images/aboutTravelAi/home.png"
            alt=""
            class="inline-block mr-2 mb-1"
            width="15"
            height="15"
          />
          <span>{{ $t("aboutTravelAi.home") }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{
          $t("aboutTravelAi.Feature")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="text-[#0572c0]">{{
            $t("aboutTravelAi.AboutTravelAI")
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="w-[80%] m-auto">
      <Feature />
    </div>
    <div class="w-[100%]">
      <Advantage />
    </div>
    <div class="w-[100%] h-[600px]">
      <Data />
    </div>
    <footer>
      <Footer />
    </footer>
  </div>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import Header from "@/components/header.vue";
import Feature from "./components/feature.vue";
import Advantage from "./components/Advantage.vue";
import Data from "./components/data.vue";
import Footer from "@/components/footer.vue";
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  // background: #f5f5f5;
  .home-container {
    width: 100%;
    height: 600px;
    background: url("@/assets/images/aboutTravelAi/bg.png") no-repeat;
    background-size: cover;
    background-position: center; /* 确保图片在元素中心 */
    position: relative;
    .tips {
      position: absolute;
      left: 28%;
      top: 45%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #fff;
      padding: 20px 10px;
      width: 370px;
      background: #013578;
      color: #fff;
    }
    .search {
      position: absolute;
      left: 28%;
      top: 75%;
      transform: translate(-50%, -50%);
      width: 370px;
    }
  }
  .header {
    height: 80px;
  }
}
</style>
